<?php
$dir_folder = array(
	'landing' => 'im/landing/',
	'category' => 'im/category/',
	'event' => 'im/event/',
	'other' => 'im/other/',
	'faq' => 'im/other/',
);

function menu_show() {
	$menu_array = array('' => 'home', 'about_us' => 'about us', 'category' => 'category', 'event' => 'event', 'faq' => 'faq', 'contact_us' => 'contact us');
	
	if ($menu_array) {
		foreach ($menu_array as $k => $v) {
			if ($k != $_REQUEST['mod']) {
				++$i;
				$link = '';
				$style = '';
				if ($k != '') {
					$link = '?mod='. $k;
				}
				if ($_REQUEST['mod']) {
					$style = ' style="position: relative; animation: menu_move '.(500+($i*250)).'ms ease-in-out 0s; transition: all 1s ease-in-out cubic-bezier(0.25, 0.1, 0.25, 1) 0s;"';
				}
				$r .= '<a href="index.php'.$link.'"'.$style.'>'.msg($v).'</a>';
			}
		}
	}
	return $r;
}

function style_page1($title, $content, $img = '', $form = ''){
	$m = 2;
	$q = $m+1;
	$n = $m+2;
	$o = $m+5;
	$p = $m+6;
	$class = ' class="'.$_REQUEST['mod'].'"';
// 	if ($_REQUEST['mod'] == 'settings') {
// 		$class = ' class="settings"';
// 	}
	$more_link = '';
	if ($_REQUEST['link']) {
		$more_link = '?mod=' . $_REQUEST['mod'];
	}
	if ($img) {
		$img_show = '<img src="'.$img.'" style="float: right; margin: 10px; opacity: 0; transition: all 4s cubic-bezier(0.25, 0.1, 0.25, 1) '.$p.'s ;-moz-transition: all 2s cubic-bezier(0.25, 0.1, 0.25, 1) '.$p.'s; -webkit-transition: all 2s cubic-bezier(0.25, 0.1, 0.25, 1) '.$p.'s;-o-transition: all 2s cubic-bezier(0.25, 0.1, 0.25, 1) '.$p.'s;" width="350" height="400">';
	}
	$r = '
		<div id="page">
			'.bg_page().'
			<div id="page-title" style="margin-top: -200px; transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$m.'s; -moz-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$m.'s; -webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$m.'s; -o-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$m.'s;">
				'.$title.'
			</div>
			<div id="page-content"'.$class.' style="width: 934px; left: -100px; opacity: 0; transition: all 0s cubic-bezier(0.25, 0.1, 0.25, 1) '.$n.'s ; -moz-transition: all 2s cubic-bezier(0.25, 0.1, 0.25, 1) '.$n.'s; -webkit-transition: all 2s cubic-bezier(0.25, 0.1, 0.25, 1) '.$n.'s; -o-transition: all 2s cubic-bezier(0.25, 0.1, 0.25, 1) '.$n.'s;">
				<div id="page-text" style="opacity: 0; transition: all 4s cubic-bezier(0.25, 0.1, 0.25, 1) '.$o.'s ;-moz-transition: all 2s cubic-bezier(0.25, 0.1, 0.25, 1) '.$o.'s;-webkit-transition: all 2s cubic-bezier(0.25, 0.1, 0.25, 1) '.$o.'s;-o-transition: all 2s cubic-bezier(0.25, 0.1, 0.25, 1) '.$o.'s;">'.$content.'</div>
				'.$img_show.$form.'
			</div>
		</div>
	';
	return $r;
}

function landing() {
	global $db, $dir_folder;
	$sql = '
	SELECT
		id_landing, 
		landing_header, 
		landing_details, 
		landing_link,
		landing_img, 
		added, 
		added_by, 
		updated, 
		updated_by, 
		removed, 
		removed_by
	FROM 
		sf_landing
	WHERE 
		removed IS NULL';
	$rsl = $db->GetAssoc($sql);

	$r = bg_page().'<div id="landing">';
	$dot = '';
	if ($rsl) {
		foreach ($rsl as $k => $v) {
			$r .= '
			<div class="landing-item" style="opacity: 0;">
				<div class="landing-item-bg" style="background-image: url(\''.$dir_folder['landing'].$k.'.'.$v['landing_img'].'\'); background-size:100% 100%; background-repeat:no-repeat;"></div>
				<div class="landing-item-title">
				'.nl2br($v['landing_header']).'
				</div>
				<div class="landing-item-text">
				'.nl2br($v['landing_details']).'
				</div>
			</div>';

			$dot .= '<div class="landing-dot" landing_link="'.$v['landing_link'].'" style="left: '.(72*$k).'px;"></div>';
		}
	}
	$r .= '</div>
	<div id="landing-dots">'.$dot.'</div>
	<script type="text/javascript">
		$(document).ready(function(){
			move_me('.($k+1).');
			$(".landing-dot").click(function(){
				move_me($(this).index());
			});
		});
	</script>
	';
	
	return $r;
}

function about_us(){
	global $db, $dir_folder;
	$dir = $dir_folder['other'];
	$sql = '
	SELECT
		aboutus_details,
		aboutus_img
	FROM 
		sf_aboutus
	WHERE 
		removed IS NULL';
	$content = $db->GetRow($sql);

	$title = 'About us';
	$img = $dir.'aboutus.'.$content['aboutus_img'];
	$r = style_page1($title, $content['aboutus_details'], $img).'
		<script type="text/javascript">
			$(document).ready(function(){
				page_style();
			});
		</script>
	';
	return $r;
}

function contact_us(){
	global $db;
	
	if ($_POST['send']) {
		$missing_field = 0;
		if (trim($_POST['customer_name']) == '') {
			++$missing_field;
		}
		if (trim($_POST['email']) == '') {
			++$missing_field;
		}
		if (trim($_POST['reason']) == '') {
			++$missing_field;
		}
		if (trim($_POST['other']) == '') {
			++$missing_field;
		}
		if (!$_POST['privacy']) {
			++$missing_field;
		}
		if ($missing_field > 0) {
			$opt['missing_field'] = 'Missing Required Fields';
			echo json_encode($opt);
			exit;
		}
		
		$param_sql = array(
			'table' => 'sf_contactus_sent',
			'cols' => array(
				'customer_name', '%s', $_POST['customer_name'],
				'company', '%s', $_POST['company'],
				'email', '%s', $_POST['email'],
				'reason', '%s', $_POST['reason'],
				'other', '%s', $_POST['other'],
				'sent', '', 'NOW()',
			),
		);
		$contactus_sent = db_query($param_sql);
		
		$opt['completed'] = 1; 
		echo json_encode($opt);
		//send mail to
		exit;
	}

	$sql = '
	SELECT
		contactus_details
	FROM 
		sf_contactus
	WHERE 
		removed IS NULL';
	$content = $db->GetOne($sql);
	
	$title = 'Contact us';
	$p = 7;
	$form = '
		<form id="form_settings" style="padding-top: 10px; padding-right: 10px; float: right; opacity: 0; transition: all 4s cubic-bezier(0.25, 0.1, 0.25, 1) '.$p.'s ;-moz-transition: all 2s cubic-bezier(0.25, 0.1, 0.25, 1) '.$p.'s; -webkit-transition: all 2s cubic-bezier(0.25, 0.1, 0.25, 1) '.$p.'s;-o-transition: all 2s cubic-bezier(0.25, 0.1, 0.25, 1) '.$p.'s;" method="post" action="index.php?mod=contact_us&ajax=1">
			<table>
				<tr><td><span class="form2-field-label">Name<span class="form2-required-suffix">*</span></span><br/>'.form_input('customer_name', array('param1' => 400)).'</td></tr>
				<tr><td><span class="form2-field-label">Company</span><br/>'.form_input('company', array('param1' => 400)).'</td></tr>
				<tr><td><span class="form2-field-label">Email<span class="form2-required-suffix">*</span></span><br/>'.form_input('email', array('param1' => 400)).'</td></tr>
				<tr><td><span class="form2-field-label">Reason<span class="form2-required-suffix">*</span></span><br/>'.form_select('reason', array('param1' => 400, 'values' => array('General Information', 'Organising an event', 'Supply Catering', 'trouble'), 'param2' => 'N')).'</td></tr>
				<tr><td><span class="form2-field-label">Other<span class="form2-required-suffix">*</span></span><br/>'.form_textarea('other', array()).'</td></tr>
				<tr><td><span class="form2-field-label">Privacy<span class="form2-required-suffix">*</span></span><br/>'.form_checkbox('privacy', array('values' => array(1 => 'I consent to the processing of my personal data'))).'</td></tr>
				<tr><td align="right"><div id="form2-field-pc_contact_send" class="form2-field form2-type-submit no-label submit"><div class="form2-field-data"><button class="form2-submit" id="pc_contact_send" type="submit" name="send" value="send"><strong><span>Send</span></strong></button></div></div></td></tr>
			</table>
		</form>
	';
	$r = style_page1($title, $content, $img, $form).'
		<script type="text/javascript">
			$(document).ready(function(){
				page_style();
				
				$("input[type=submit], input[type=button]").button();
				$("#form_settings").ajaxForm({
					dataType:  "json",
					success:   processJson
				});
				function processJson(data) {
					if (data.completed == 1) {
						alert("sent");
						window.location="index.php?mod=contact_us";
					} else {
						alert(data.missing_field);
					}
				}
			});
		</script>';
	return $r;
}

function category(){
	global $db, $dir_folder;
	$dir = $dir_folder['category'];
	$sql = '
	SELECT
		id_category, 
		category_name, 
		category_img, 
		category_detail1, 
		category_detail2,
		category_img1, 
		category_img2 
	FROM 
		sf_category
	WHERE 
		removed IS NULL';
	$rsl = $db->GetAssoc($sql);
	
	//show submenu
	if ($_REQUEST['id']) {
		$r = submenu_show($rsl, $_REQUEST['mod'], 'category_name');
	}
	
	$r .= bg_page().'
	<div id="page-title" style="margin-top: -200px; transition: all 2s cubic-bezier(0.25, 0.1, 0.25, 1) 2s;">
		Category
	</div>';
	
	if ($_REQUEST['link'] == 'detail') {
		$sql .= SQL(' AND id_category=%d', $_REQUEST['id']);
		$row = $db->GetRow($sql);

		$m = 5;
		$n = 6;
		$r .= '<div id="tastes-detail">
			<div id="tastes-detail-content-1" style="width: 930px; left: -100px; opacity: 0; transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$m.'s; -moz-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$m.'s; -webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$m.'s; -o-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$m.'s;">
				<div style="padding: 20px; width: 290px; float: left;">
				'.nl2br($row['category_detail1']).'
				</div>
				<img src="'.$dir.'detail1_'.$_REQUEST['id'].'.'.$row['category_img1'].'" style="float: right;" width="600" height="200"/>
			</div>
			<div id="tastes-detail-content-2" style="width: 930px; left: 500px; opacity: 0; transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$n.'s; -moz-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$n.'s; -webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$n.'s; -o-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$n.'s;">
				<div style="padding: 20px; width: 290px; float: right;">
				'.nl2br($row['category_detail2']).'
				</div>
				<img src="'.$dir.'detail2_'.$_REQUEST['id'].'.'.$row['category_img2'].'" style="float: left;" width="600" height="200"/>
			</div>
		</div>';
	} else {
		$m = 2;
		$r = bg_page().'
		<div id="page-title" style="margin-top: -200px; transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$m.'s; -moz-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$m.'s; -webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$m.'s; -o-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$m.'s;">
		Category
		</div>';
		
		$r .= '<div id="tastes-list">';
		if ($rsl) {
			foreach ($rsl as $k => $v) {
				++$m;
				++$i;
				$m = (4000+($i*250));
				$r .= '
				<a class="tastes-item" href="index.php?mod=category&link=detail&id='.$k.'" style="z-index: '.(30-$i).'; opacity: 0; top: -30px; transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$m.'ms; -moz-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$m.'ms; -webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$m.'ms; -o-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$m.'ms;">
					<div class="tastes-item-img">
						<img src="'.$dir_folder['category'].$k.'.'.$v['category_img'].'" style="top: 0px; transition: all 2s cubic-bezier(0.25, 0.1, 0.25, 1) 0s ;">
					</div> 
					<span style="opacity: 0;"></span>
					<h3>'.nl2br($v['category_name']).'</h3> 
				</a> ';
			}
		}
		$r .= '</div>';
	}
	$r .= '
	<script type="text/javascript">
		$(document).ready(function(){
			$("a.tastes-item").css("opacity", 1).css("top", 0);
			page_detail_style();
			page_style();
			$("a.tastes-item").mouseover(function(){
				$(this).find("img").css("transition", "top 2s").css("top", "-30px");
				$(this).find("h3").css("transform", "translateY(-5px)").css("transition", "background-color 2s").css("background-color","#E23D64;");
			}).mouseout(function(){
				$(this).find("img").css("transition", "top 2s").css("top", "0px");
				$(this).find("h3").css("transform", "translateY(0px)");
			});
		});
	</script>';
	return $r;
}

function event(){
	global $db, $dir_folder;
	$dir = $dir_folder['event'];
	$sql = '
	SELECT
		id_event, 
		event_name, 
		event_img, 
		event_detail1,
		event_img1
	FROM 
		sf_event
	WHERE 
		removed IS NULL';
	
	//show submenu
	if ($_REQUEST['id']) {
		$rsl = $db->GetAssoc($sql);
		$r = submenu_show($rsl, $_REQUEST['mod'], 'event_name');
	}
	
	if ($_REQUEST['link'] == 'detail') {
		$sql .= SQL(' AND id_event=%d', $_REQUEST['id']);
		$row = $db->GetRow($sql);

		$img = $dir.'detail1_'.$_REQUEST['id'].'.'.$row['event_img1'];
		$r .= style_page1($row['event_name'], $row['event_detail1'], $img);
	} else {
		$rsl = $db->GetAssoc($sql);
		$m = 2;
		$r .= bg_page().'
		<div id="page-title" style="margin-top: -200px; transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$m.'s; -moz-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$m.'s; -webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$m.'s; -o-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$m.'s;">
			Event
		</div>';
		$r .= '<div id="tastes-list">';
		if ($rsl) {
			foreach ($rsl as $k => $v) {
				++$m;
				++$i;
				$m = (4000+($i*250));
				$r .= '
				<a class="tastes-item" href="index.php?mod=event&link=detail&id='.$k.'" style="z-index: '.(30-$i).'; opacity: 0; top: -30px; transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$m.'ms; -moz-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$m.'ms; -webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$m.'ms; -o-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) '.$m.'ms;">
					<div class="tastes-item-img">
						<img src="'.$dir_folder['event'].$k.'.'.$v['event_img'].'" style="top: 0px; transition: all 2s cubic-bezier(0.25, 0.1, 0.25, 1) 0s ;">
					</div> 
					<span style="opacity: 0;"></span>
					<h3>'.nl2br($v['event_name']).'</h3> 
				</a> ';
			}
		}
		$r .= '</div>';
	}
	$r .= '
	<script type="text/javascript">
		$(document).ready(function(){
			$("a.tastes-item").css("opacity", 1).css("top", 0);
			page_detail_style();
			page_style();
			$("a.tastes-item").mouseover(function(){
				$(this).find("img").css("transition", "top 2s").css("top", "-30px");
				$(this).find("h3").css("transition", "background-color 2s").css("background-color","#E23D64;").css("transform", "translateY(-5px)");
			}).mouseout(function(){
				$(this).find("img").css("transition", "top 2s").css("top", "0px");
				$(this).find("h3").css("transform", "translateY(0px)");
			});
		});
	</script>';
	return $r;
}

function faq(){
	global $db, $dir_folder;
	$dir = $dir_folder['other'];
	$sql = '
	SELECT
		id_faq, 
		faq_question, 
		faq_answer, 
		faq_order
	FROM 
		sf_faq
	WHERE
		removed IS NULL';
	$rsl = $db->GetAssoc($sql);
	
	$title = 'FAQ';
	$c = '';
	if ($rsl) {
		$c .= '<dl>';
		foreach ($rsl as $k => $v) {
			$c .= '
			<dt rel="0"><span class="faq-arr"></span>'.$v['faq_question'].'</dt>
			<dd style="height: 0px; transition: all 2s cubic-bezier(0.25, 0.1, 0.25, 1) 0s ;">'.$v['faq_answer'].'</dd>';
		}
		$c .= '</dl>';
	}

	$r = style_page1($title, $c, $dir.'faq.jpg') . '
	<script type="text/javascript">
		$(document).ready(function(){
			page_style();
			$("dt").click(function(){
				if ($(this).attr("rel") == 1) {
					$(this).attr("rel", 0).next().css("height", "0px");
					$(this).find("span.faq-arr").css("transition","all 3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s ;").css("transform", "rotate(0deg)")
				} else {
					$(this).attr("rel", 1).next().css("height", "40px");
					$(this).find("span.faq-arr").css("transition","all 3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s ;").css("transform", "rotate(90deg)");
				}
			});
		});
	</script>';
	return $r;
}

function bg_page(){
	$r = '<div id="page-bg" style="background-image: url(\'im/other/bg.jpg\'); background-size:100% 100%; background-repeat:no-repeat;"; opacity: 1; transition: all 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s ;"></div>';
	return $r;
}

function msg1($text){
	global $translations;
	
	if ($translations[$text]) {
		return $translations[$text];
	} else {
		return $text;
	}
}

function submenu_show($rsl, $entity, $field = ''){
	$cnt = ceil(COUNT($rsl)/2) + 1;
	$r = '
	<div id="section-menu" style="z-index: 2; height: 40px; transition: all 2s cubic-bezier(0.25, 0.1, 0.25, 1) 0s;">
		<div class="section-menu-cnt" style="opacity: 0; top: -80px; left: 222px; transition: all 2s cubic-bezier(0.25, 0.1, 0.25, 1) 0s;">';
		if ($rsl) {
			foreach ($rsl as $k => $v) {
				if (++$i%$cnt == 0) {
					$r .= '
					</div>
					<div class="section-menu-cnt" style="opacity: 0; top: -80px; left: 412px; transition: all 2s cubic-bezier(0.25, 0.1, 0.25, 1) 0s ;">';
				}
				if ($entity == 'settings') {
					$r .= '<a href="index.php?mod=settings&view='.$v.'">'.msg1($v).'</a>';
				} else {//for event & category
					$r .= '<a href="index.php?mod='.$entity.'&link=detail&id='.$k.'">'.$v[$field].'</a>';
				}
				
			}
		}
	if ($entity == 'settings') {
		$show = $_REQUEST['view'];
	} else {
		$show = $rsl[$_REQUEST['id']][$field];
	}
	$r .= '
		</div>
		<div id="section-menu-reopen" style="opacity: 1; bottom: 10px; transition: all 2s cubic-bezier(0.25, 0.1, 0.25, 1) 0s;">
			'.msg($show).'
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#section-menu").mouseover(function(){
				$("#section-menu-reopen").css("opacity", 0).css("top", "-80px");
				$("div.section-menu-cnt").css("opacity", 1).css("top", "0px").parent().css("height", "80px");
			}).mouseout(function(){
				$("#section-menu-reopen").css("opacity", 1).css("top", "10px").css("bottom", "10px");
				$("div.section-menu-cnt").css("opacity", 0).css("top", "-80px").parent().css("height", "40px");
			});
		});
	</script>
	';
	return $r;
}